<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <el-row>
      <el-col :span='15'>
        <p class='p_hr'>基本信息</p>
        <el-form-item label="所属类目" prop="categoryId">
          <el-select :disabled = "type === 'edit'" v-model="form.categoryId" placeholder="请选择类目">
            <el-option
              :label="opt.name"
              :value="opt.categoryId"
              v-for='opt in categoryList'
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="form.title" :maxlength='22'></el-input>
        </el-form-item>
        <el-form-item label="商品卖点" prop="sellPoint">
          <el-input v-model="form.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="商品政策" prop="labelList">
          <!-- <el-input v-model="form.labelList" ></el-input> -->
          <el-row :gutter="20">
            <el-col :span='5'>
              <el-input v-model="form.labelList1" :maxlength='6'></el-input>
            </el-col>
            <el-col :span='5'>
              <el-input v-model="form.labelList2" :maxlength='6'></el-input>
            </el-col>
            <el-col :span='5'>
              <el-input v-model="form.labelList3" :maxlength='6'></el-input>
            </el-col>
            <el-col :span='8'>
              <div>例如“七天退货”、“铂涛定制”</div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="制造工厂" prop="factory">
          <el-input v-model="form.factory "></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  import {
    getCategoryList
  } from 'src/api/index.js'
  export default {
    props: ['type', 'categoryId', 'title', 'sellPoint', 'labelList', 'factory'],
    created () {
      getCategoryList()
        .then((res) => {
          let result = res.data
          if (result.code === 100) {
            this.categoryList = result.data
          }
        })
    },
    data () {
      let that = this
      return {
        categoryList: [],
        form: {
          categoryId: '',
          factory: '',
          labelList1: '',
          labelList2: '',
          labelList3: '',
          sellPoint: '',
          title: '',
          labelList: ''
        },
        rules: {
          categoryId: [
            {
              required: true,
              message: '请选择类目',
              trigger: 'change',
              validator: function (rule, value, callback) {
                let condition = that.form.categoryId
                if (!condition) {
                  callback(new Error('请选择类目'))
                }
                callback()
              }
            }
          ],
          title: [
            {required: true, message: '请填写商品名称', trigger: 'blur'}
          ],
          sellPoint: [
            {required: true, message: '请填写商品卖点', trigger: 'blur'}
          ],
          labelList: [
            {
              required: true,
              message: '请填写商品政策',
              trigger: 'blur',
              validator: function (rule, value, callback) {
                let condition = that.form.labelList1 === '' && that.form.labelList2 === '' && that.form.labelList3 === ''
                if (condition) {
                  callback(new Error('请填写商品政策'))
                }
                callback()
              }
            }
          ]
        }
      }
    },
    watch: {
      'form.categoryId': function () {
        this.$emit('categoryIdChange', this.form.categoryId)
      },
      'categoryId': function () {
        if (this.type === 'edit') {
          this.form.categoryId = this.categoryId
          this.form.title = this.title
          this.form.labelList1 = this.labelList[0] || ''
          this.form.labelList2 = this.labelList[1] || ''
          this.form.labelList3 = this.labelList[2] || ''
          this.form.sellPoint = this.sellPoint
          this.form.labelList = this.labelList
          this.form.factory = this.factory
        }
      }
    },
    computed: {
      formStr () {
        return JSON.stringify(this.form)
      },
      labelStr () {
        return this.form.labelList1 + this.form.labelList2 + this.form.labelList3
      }
    },
    methods: {
      getFormData () {
        let params = this.form
        params.labelList = [this.form.labelList1, this.form.labelList2, this.form.labelList3]
        delete params.labelList1
        delete params.labelList2
        delete params.labelList3
        return params
      },
      formValidation () {
        let result
        this.$refs.form.validate(function (boolean) {
          result = boolean
        })
        return result
      }
    }
  }
</script>

<style>

</style>
